<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="Shuai Duan">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta http-equiv="refresh" content="">
    <meta http-equiv="content-type" content="text/html">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link rel="stylesheet" href="css/style.css">
    <title>backstages</title>
</head>
<body>
    <div class="parent">
        <!-- 头部 -->
        <div class="header clearfix">
            <a href="#" class="header-logo"><img src="images/logo.png" alt="" ></a>
            <div class="header-search clearfix">
                <a href="#" class="search-search"><img src="images/search.png" alt="" ></a>
                <input type="text" class="search-input">
            </div>
        </div>
        <!-- 左边导航 -->
        <div class="sidebar">
            <div class="sidebar-head clearfix">
                <a href="#" class="head-head"><img src="images/head.png" alt="" ></a>
                <a href="" class="head-name"><p >ABC123</p></a>
                <ul class="head-people clearfix">
                    <li class="people-save"><a href="">101</a><br/>收藏</li>
                    <li><a href="">313</a><br/>粉丝</li>
                </ul>
            </div>
            <ul class="sidebar-nav">
                <!-- 一级目录 -->
                <li class="nav-form  nav-form-color clearfix">
                    <span class="form-picture form-picture-hover"></span><a href="" class="form-personal form-picture-hover-a">个人报表</a>
                    <!-- 二级目录 -->
                    <br/>
                    <div class="nav-text1">
                        <span class="form-picture text-picture"></span>
                        <span class="form-picture text-picture1"></span>
                        <a href="" class="form-personal nav-text1-a">文件一</a>
                        <br/>
                        <!-- 三级目录 -->
                        <div class="nav-text3-1">
                            <span class="form-picture text3-picture"></span><a href="" class="form-personal nav-text3-1-a">文档一</a>
                        </div>
                        <div class="nav-text3-1">
                            <span class="form-picture text3-picture"></span><a href="" class="form-personal nav-text3-1-a">文档二</a>
                        </div>
                    </div>
                    <div class="nav-text1 nav-text2">
                        <span class="form-picture text-picture"></span>
                        <span class="form-picture text-picture1"></span>
                        <a href="" class="form-personal nav-text1-a">文件二</a>
                    </div>
                    <div class="nav-text1 nav-text3">
                        <span class="form-picture text-picture"></span>
                        <span class="form-picture text-picture1"></span>
                        <a href="" class="form-personal nav-text1-a">文件三
                        </a>
                    </div>
                </li>
                <li class="nav-form clearfix">
                    <span class="form-picture nav-from-public"></span><a href="" class="form-personal">个人收藏</a>
                </li>
                <li class="nav-form clearfix">
                    <span class="form-picture from-sharp"></span><a href="" class="form-personal">我的分享</a>
                </li>
                <li class="nav-form clearfix">
                    <span class="form-picture nav-from-public"></span><a href="" class="form-personal">图库</a>
                </li>
                <li class="nav-form  clearfix">
                    <span class="form-picture nav-from-public"></span><a href="" class="form-personal">成长记录</a>
                </li>
                <li class="nav-form clearfix">
                    <span class="form-picture nav-from-last"></span><a href="" class="form-personal">账户信息</a>
                </li>
            </ul>
        </div>
        <!-- content部分 -->
        <div class="content">
            <!-- 表头 -->
            <div class="content-list"><a href="" class="a-color">C站  </a>/<a class="a-color" href=""> 个人报表 </a>/<a class="a-color" href=""> 文件一 </a>／<a href=""> 文档一 </a></div>
            <!-- 查询项 -->
            <div class="content-search clearfix">
                <div class="content-search-div">
                    <ul class="content-search-div-first clearfix">
                        <li class="first-search-public clearfix">
                            <a href="">查询项</a><span class="clearfix white">第一项<b></b></span>
                            <ul class="search-public-select">
                                <li><span class="select-li-first select-li-public">第一项</span></li>
                                <li><span class="select-li-public">第二项</span></li>
                                <li><span  class="select-li-public">第三项</span></li>
                            </ul>
                        </li>
                        <li class="first-search-public search-div-lenght search-div-lenghtt clearfix">
                            <a href="">买方</a><span class="clearfix white">小A<b></b></span>
                            <ul class="search-public-select public-ul-buyer">
                                <li><span class="select-li-first select-li-public">小A</span></li>
                                <li><span class="select-li-public">小B</span></li>
                                <li><span  class="select-li-public">小C</span></li>
                            </ul>

                        </li>
                        <li class="first-search-public first-search-date clearfix">
                            <a href="">日期</a><span>2016-04-01</span>
                        </li>
                        <li class="first-search-public first-search-weast clearfix">
                            <a href="">总耗时</a><span class="clearfix white">8天<b></b></span>
                            <ul class="search-public-select">
                                <li><span class="select-li-first select-li-public">第一项</span></li>
                                <li><span class="select-li-public">第二项</span></li>
                                <li><span  class="select-li-public">第三项</span></li>
                            </ul>
                        </li>
                       
                    </ul>
                    <ul class="content-search-div-first clearfix">
                        <li class="first-search-public first-search-public0 search-div-lenght search-div-position clearfix">
                            <a href="">卖方</a><span class="clearfix white">小C<b></b></span>
                            <ul class="search-public-select public-ul-buyer">
                                <li><span class="select-li-first select-li-public">小A</span></li>
                                <li><span class="select-li-public">小B</span></li>
                                <li><span  class="select-li-public">小C</span></li>
                            </ul>
                        </li>
                        <li class="first-search-public first-search-public0 first-search-people clearfix">
                            <a href="">人数</a><span class="clearfix white">第一项<b></b></span>
                            <ul class="search-public-select public-select-people">
                                <li><span class="select-li-first select-li-public">第一项</span></li>
                                <li><span class="select-li-public">第二项</span></li>
                                <li><span  class="select-li-public">第三项</span></li>
                            </ul>
                        </li>
                        <li class="first-search-public first-search-public0 first-search-buy clearfix">
                            <a href="">成交项</a><span class="clearfix white">第一项<b></b></span>
                            <ul class="search-public-select">
                                <li><span class="select-li-first select-li-public">第一项</span></li>
                                <li><span class="select-li-public">第二项</span></li>
                                <li><span  class="select-li-public">第三项</span></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <input type="button" value="搜索" class="content-search-input">
                <img src="images/sales.png" alt="">
            </div>
            <!-- 时间表 -->
            <div class="content-time">
                <ul class="clearfix">
                    <li class="than than-img"></li>
                    <li class="time-time">
                        <div class="time-blue"></div>
                        <div>
                            <p>10:00am</p>
                            <b>￥<span>1200</span></b>
                        </div>
                    </li>
                    <li class="time-time">
                        <div class="time-blue"></div>
                        <div>
                            <p>11:00am</p>
                            <b>￥<span>1300</span></b>
                        </div>
                    </li>
                    <li class="time-time">
                        <div class="time-blue"></div>
                        <div>
                            <p>12:00am</p>
                            <b>￥<span>1200</span></b>
                        </div>
                    </li>
                    <li class="time-time">
                        <div class="time-blue"></div>
                        <div>
                            <p>01:00am</p>
                            <b>￥<span>1400</span></b>
                        </div>
                    </li>
                    <li class="time-time">
                        <div class="time-blue"></div>
                        <div>
                            <p>02:00am</p>
                            <b>￥<span>1500</span></b>
                        </div>
                    </li>
                    <li class="time-time">
                        <div class="time-blue"></div>
                        <div>
                            <p>03:00am</p>
                            <b>￥<span>1800</span></b>
                        </div>
                    </li>
                    <li class="than than-img-img"></li>
                    <li class="time-last">
                        <p>历史查询</p> 
                    </li>
                </ul>
            </div>
            <!-- 统计 -->
            <b class="blod">2016年4月份统计</b>
            <ul class="count clearfix">
                <li class="clearfix">
                    <div class="count-color"></div>
                    <div class="count-word">
                        <p class="count-value">1133311</p>
                        <p class="count-sales">成交量</p>
                    </div>
                    <div class="count-aquare">
                    </div>
                </li>
                <li>
                    <div class="count-color count-color2"></div>
                    <div class="count-word">
                        <p class="count-value">1133311</p>
                        <p class="count-sales">成交量</p>
                    </div>
                    <div class="count-aquare count-color2">
                    </div>
                </li>
                <li>
                    <div class="count-color count-color3"></div>
                    <div class="count-word">
                        <p class="count-value">1133311</p>
                        <p class="count-sales">成交量</p>
                    </div>
                    <div class="count-aquare count-color3">
                    </div>
                </li>
                <li class="count-last">
                    <div class="count-color count-color4"></div>
                    <div class="count-word">
                        <p class="count-value">1133311</p>
                        <p class="count-sales">成交量</p>
                    </div>
                    <div class="count-aquare count-color4">
                    </div>
                </li>
            </ul>
            <!-- 项目 -->
            <ul class="project clearfix">
                <li class="project-one">
                    <div class="one-head">
                        第一组项目
                    </div>
                    <ul class="clearfix">
                            <li class="one-content-li2 one-content-li11">项目一
                                <div class="one-content two-content">
                                    <table border="1" cellpadding="0" cellspacing="0" rules="all">
                                        <tr height="28px" class="tr">
                                            <td width="98px">购买材料一</td>
                                            <td width="98px"> 购买材料一</td>
                                            <td width="98px">购买材料一</td>
                                            <td width="98px">购买材料一</td>
                                        </tr>
                                        <tr  height="28px">
                                            <td>购买材料六</td>
                                            <td>购买材料六</td>
                                            <td>购买材料六</td>
                                            <td>购买材料六</td>
                                        </tr>
                                        <tr  height="28px">
                                            <td>购买材料二</td>
                                            <td>购买材料二</td>
                                            <td>购买材料二</td>
                                            <td>购买材料二</td>
                                        </tr>
                                        <tr  height="28px">
                                            <td>购买材料四</td>
                                            <td>购买材料四</td>
                                            <td>购买材料四</td>
                                            <td>购买材料四</td>
                                        </tr>
                                      
                                        <tr  height="28px">
                                            <td>购买材料二十</td>
                                            <td>购买材料二十</td>
                                            <td>购买材料二十</td>
                                            <td>购买材料二十</td>
                                        </tr>
                                        <tr  height="28px">
                                            <td>购买材料十三</td>
                                            <td>购买材料十三</td>
                                            <td>购买材料十三</td>
                                            <td>购买材料十三</td>
                                        </tr>     
                                    </table>
                                </div>
                            </li>
                            <li class="one-content-li2">项目二</li>
                            <li class="one-content-li2 .one-content-li13">项目三
                                <div class="one-content three-content ">
                                    <table border="1" cellpadding="0" cellspacing="0" rules="all">
                                        <tr height="28px" class="tr">
                                            <td width="98px">购买材料一</td>
                                            <td width="98px">购买材料一</td>
                                            <td width="98px">购买材料一</td>
                                            <td width="98px">购买材料一</td>
                                        </tr>
                                        <tr  height="28px">
                                            <td>购买材料六</td>
                                            <td>购买材料六</td>
                                            <td>购买材料六</td>
                                            <td>购买材料六</td>
                                        </tr>
                                        <tr  height="28px">
                                            <td>购买材料二</td>
                                            <td>购买材料二</td>
                                            <td>购买材料二</td>
                                            <td>购买材料二</td>
                                        </tr>
                                        <tr  height="28px">
                                            <td>购买材料四</td>
                                            <td>购买材料四</td>
                                            <td>购买材料四</td>
                                            <td>购买材料四</td>
                                        </tr>
                                        <tr  height="28px">
                                            <td>购买材料二十</td>
                                            <td>购买材料二十</td>
                                            <td>购买材料二十</td>
                                            <td>购买材料二十</td>
                                        </tr>
                                        <tr  height="28px">
                                            <td>购买材料十三</td>
                                            <td>购买材料十三</td>
                                            <td>购买材料十三</td>
                                            <td>购买材料十三</td>
                                        </tr>     
                                    </table>
                                </div>
                            </li>
                            <li class="one-content-li2">项目三
                                <div class="one-content  four-content">
                                    <table border="1" cellpadding="0" cellspacing="0" rules="all">
                                        <tr height="28px" class="tr">
                                            <td width="98px">购买材料一</td>
                                            <td width="98px">购买材料一</td>
                                            <td width="98px">购买材料一</td>
                                            <td width="98px">购买材料一</td>
                                        </tr>
                                        <tr  height="28px">
                                            <td>购买材料六</td>
                                            <td>购买材料六</td>
                                            <td>购买材料六</td>
                                            <td>购买材料六</td>
                                        </tr>
                                        <tr  height="28px">
                                            <td>购买材料二十</td>
                                            <td>购买材料二十</td>
                                            <td>购买材料二十</td>
                                            <td>购买材料二十</td>
                                        </tr>
                                        <tr  height="28px">
                                            <td>购买材料二</td>
                                            <td>购买材料二</td>
                                            <td>购买材料二</td>
                                            <td>购买材料二</td>
                                        </tr>
                                        <tr  height="28px">
                                            <td>购买材料十三</td>
                                            <td>购买材料十三</td>
                                            <td>购买材料十三</td>
                                            <td>购买材料十三</td>
                                        </tr>   
                                        <tr  height="28px">
                                            <td>购买材料四</td>
                                            <td>购买材料四</td>
                                            <td>购买材料四</td>
                                            <td>购买材料四</td>
                                        </tr>
                                    </table>
                                </div>
                            </li>
                            <li class="one-content-li">项目四</li>
                        </ul>
                    <div class="one-content">
                        <table border="1" cellpadding="0" cellspacing="0" rules="all">
                            <tr height="28px" class="tr">
                                <td width="98px">购买材料一</td>
                                <td width="98px">购买材料一</td>
                                <td width="98px">购买材料一</td>
                                <td width="98px">购买材料一</td>
                            </tr>
                            <tr  height="28px">
                                <td>购买材料二</td>
                                <td>购买材料二</td>
                                <td>购买材料二</td>
                                <td>购买材料二</td>
                            </tr>
                            <tr  height="28px">
                                <td>购买材料四</td>
                                <td>购买材料四</td>
                                <td>购买材料四</td>
                                <td>购买材料四</td>
                            </tr>
                            <tr  height="28px">
                                <td>购买材料六</td>
                                <td>购买材料六</td>
                                <td>购买材料六</td>
                                <td>购买材料六</td>
                            </tr>
                            <tr  height="28px">
                                <td>购买材料十三</td>
                                <td>购买材料十三</td>
                                <td>购买材料十三</td>
                                <td>购买材料十三</td>
                            </tr>
                            <tr  height="28px">
                                <td>购买材料二十</td>
                                <td>购买材料二十</td>
                                <td>购买材料二十</td>
                                <td>购买材料二十</td>
                            </tr>
                        </table>
                    </div>
                </li> 
                <li class="project-two">
                    <div class="one-head">
                        第一组项目
                    </div>
                            <p>标题</p>
                            <b>项目报表三</b>
                    <div class="two-div clearfix">
                        <span class="div-span">
                            <p>价格</p>
                            <b>￥158</b>
                        </span>
                        <span class="div-span div-span-span">
                            <p>负责人</p>
                            <b>小A</b>
                        </span>
                    </div>
                    <p>详细描述</p>
                    <b>该项目目前负责人是......</b>
                    <div class="two-div-div clearfix">
                        <input type="checkbox" class="two-dd"><a href="" class="two-a">遵守保密协议</a>
                        <input type="button" value="搜索" class="two-search">
                    </div>
                </li>
            </ul>
            <!-- 尾部 -->
            <ul class="project content-date clearfix">
                <!-- 日期 -->
                <li class="project-two content-date-date">
                    <div class="one-head">
                        日历
                    </div>
                    <div class="date-date-head">
                        <ul class="clearfix">
                            <li class="year">2016年</li>
                            <li class="day">4月</li>
                            <li class="date">标注日期</li>
                            <li class="today">返回今天</li>
                        </ul>
                        <table border="0" cellpadding="0" cellspacing="0" rules="all">
                            <tr height="30px" class="table-top">
                                <td width="42px">一</td>
                                <td width="42px">二</td>
                                <td width="42px">三</td>
                                <td width="42px">四</td>
                                <td width="42px">五</td>
                                <td width="42px">六</td>
                                <td width="42px">日</td>
                            </tr>
                            <tr height="40px">
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>1<br/><span>愚人节</span></td>
                                <td><span>2</span><br/>廿五</td>
                                <td><span>3</span><br/>廿六</td>
                            </tr>
                            <tr height="40px">
                                <td>4<br/>廿七</td>
                                <td>5<br/><span>清明</span></td>
                                <td>6<br/>廿九</td>
                                <td>7<br/>三月</td>
                                <td>8<br/>初二</td>
                                <td><span>9</span><br/>初三</td>
                                <td><span>10</span><br/>初四</td>
                            </tr>
                            <tr height="40px">
                                <td>11<br/>初六</td>
                                <td>12<br/>初八</td>
                                <td>13<br/>初九</td>
                                <td>14<br/>初十</td>
                                <td>15<br/>十一</td>
                                <td><span>16</span><br/>十二</td>
                                <td><span>17</span><br/>十三</td>
                            </tr>
                            <tr height="40px">
                                <td>18<br/>十四</td>
                                <td>19<br/>十五</td>
                                <td>20<br/>十六</td>
                                <td>21<br/>十七</td>
                                <td>22<br/>十八</td>
                                <td><span>23</span><br/>十九</td>
                                <td><span>24</span><br/>廿十</td>
                            </tr>
                            <tr height="40px">
                                <td>25<br/>廿一</td>
                                <td>26<br/>廿二</td>
                                <td>27<br/>廿三</td>
                                <td>25<br/>廿四</td>
                                <td>29<br/>廿五</td>
                                <td><span>30</span><br/>廿六</td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                </li>
                <li class="project-one content-date-car">
                    <div class="one-head">

                        汽车行业品牌榜
                    </div>
                    <table border="0" cellpadding="0" cellspacing="0" rules="all">
                        <tr height="25px" class="table-top">
                            <td width="70px">排名</td>
                            <td width="91px">品牌</td>
                            <td width="290px" align="left" class="td3">搜索指数</td>
                        </tr>
                        <tr height="25px">
                            <td><a href="">1</a></td>
                            <td><a href="">丰田</a></td>
                            <td><a href="">29307333</a><img src="images/1.png" alt=""></td>
                        </tr>
                        <tr height="25px">
                            <td><a href="">2</a></td>
                            <td><a href="">奥迪</a></td>
                            <td><a href="">23139070</a><img src="images/2.png" alt=""></td>
                        </tr>
                        <tr height="25px">
                            <td><a href="">3</a></td>
                            <td><a href="">大众</a></td>
                            <td><a href="">48912001</a><img src="images/3.png" alt=""></td>
                        </tr>
                        <tr height="25px">
                            <td><a href="">4</a></td>
                            <td><a href="">本田</a></td>
                            <td><a href="">22885564</a><img src="images/4.png" alt=""></td>
                        </tr>
                        <tr height="25px">
                            <td><a href="">5</a></td>
                            <td><a href="">福特</a></td>
                            <td><a href="">22324792</a><img src="images/5.png" alt=""></td>
                        </tr>
                        <tr height="25px">
                            <td><a href="">6</a></td>
                            <td><a href="">宝马</a></td>
                            <td><a href="">21444077</a><img src="images/6.png" alt=""></td>
                        </tr>
                        <tr height="25px">
                            <td><a href="">7</a></td>
                            <td><a href="">现代</a></td>
                            <td><a href="">20114969</a><img src="images/7.png" alt=""></td>
                        </tr>
                        <tr height="25px">
                            <td><a href="">8</a></td>
                            <td><a href="">起亚</a></td>
                            <td><a href="">19251680</a><img src="images/8.png" alt=""></td>
                        </tr>
                        <tr height="25px">
                            <td><a href="">9</a></td>
                            <td><a href="">奔驰</a></td>
                            <td><a href="">19172837</a><img src="images/9.png" alt=""></td>
                        </tr>
                        <tr height="25px">
                            <td><a href="">10</a></td>
                            <td><a href="">别克</a></td>
                            <td><a href="">18544027</a><img src="images/10.png"  alt=""></td>
                        </tr>
                    </table>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>